@charset "utf-8";
@import "reset.scss";
@import "common.scss";

.wrap{
    width: 100vw;

    header{
        width: 9.3867rem;
        height: .8rem;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin: auto;
        border: 0px solid black;
        margin-top: .5333rem;
       

        button{
            width: 1.64rem;
            height: .76rem;
            border: 1px solid #ff9344;
            background-color: #fff;
            font-size: .3467rem;
            border-radius: .4rem;
            font-weight: bold;
           
        }

        p{
            font-size: .3467rem;
            line-height: .6133rem;
            font-weight: bold;
        }

        
    }

    main{

        .search{
            width: 3.5467rem;
            height: .68rem;
            margin:0 auto;
            margin-top: .6rem;
            position: relative;
            input{
                width: 3.5467rem;
                height: .68rem;
                border: .0267rem solid #ff9344;
                border-radius: .4rem;
                font-size: .36rem;
                color: #777777;
                position: relative;
               
            }
    
           
            .icon-fangdajing{
                color: #ff9344;
                font-size: .4rem;
                position: absolute;
                top: 50%; 
                right: .2667rem;              
            }
    
        }


        .tuijian{
           width: 6.8933rem;
           height: 2.5333rem;
           border: 0px solid black;
           margin: .3333rem auto;

            p{
                width: 100%;
                font-size: .3467rem;
                line-height: .6133rem;
                text-align: center;
                font-weight: bold;
            }

            .tuijian-1{
                width: 8rem;
                height: 1.7333rem;
                display: flex;
                flex-wrap: wrap;

                p{
                    font-size: .2667rem;
                    color: #898989;
                    line-height: .8667rem;
                    font-weight: 400;
                }
                

                .box{
                    width: 1.6667rem;
                    height: .8533rem;
                    background-color: #dcdcdc;
                    margin: .0267rem .0667rem ;

                }
            }
        }


        .tupian{
            width: 9.4667rem;
            height: 4.7067rem;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;

            .tupian-1{
                width: 3.7333rem;
                height: 4.6933rem;

                img{
                    width: 100%;
                }
            }

            .tupian-2{
                width: 5.6rem;
                height: 4.6933rem;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                .box1{
                    width: 5.6rem;
                    height: 1.96rem;
                    border: 0 solid black;

                    img{
                        width: 100%;
                    }
                }

                .box2{
                    width: 2.7333rem;
                    height: 2.6267rem;
                    border: 0 solid black;

                    img{
                        width: 100%;
                        height: 100%;


                    }
                }
            }
        }

        .zhanshi{
            width: 9.4267rem;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-bottom: 1.8rem;

            .box1{
                width: 2.9333rem;
                height: 2.7733rem;
                margin-bottom: .2667rem;

                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }


       
    }
}